<template>
    <div class="home">
        <van-search v-model="searchVal" background="#4fc08d" shape="round" placeholder="请输入搜索关键词" @click="gotoSearch"></van-search>

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989FA">
            <van-swipe-item v-for="item in banner" :key="item.id">
                <img   :src="item.image_url" style="display: block" width="100%" :alt="item.content"/>
            </van-swipe-item>
        </van-swipe>
        <!--路由占位符-->
        <transition name="van-slide-right">
            <router-view/>
        </transition>
    </div>
</template>

<script>
    import {GetHomeData} from '@/request/api.js'

    export default {
        name: 'Home',
        data() {
            return {
                searchVal: '',
                banner: []
            }
        },
        created() {
            //this.getEmp()
            // console.log('==========')
            // this.addEmp()
            GetHomeData().then(res => {
               // console.log(res.data.banner);
                let {banner} = res.data
                this.banner = banner
            }).catch(err => {
                console.log(err)
            })
        },
        methods: {
            async getEmp() {
                const emp = await this.$http.get('/emp/1');
                console.log(emp.data);
            },
            async addEmp() {
                let jsonData = {
                    id: 1,
                    lastName: '李辉3',
                    email: '26893569@qq.com',
                    gender: 1,
                    dId: 36
                }
                const emp = await this.$http.get('/emp', {params: jsonData})
                console.log(emp);
            },
            gotoSearch(){
                this.$router.push('/home/search')
            }
        },
        components: {}
    }
</script>
<style lang="less">
 /*  .slide-enter, .slide-leave-to{
       right: -100%;
   }
    .slide-enter-active,.slide-leave-active{
    transition: right 1s linear;
    }
    .slide-enter-to, .slide-leave{
        right: 0;
    }*/
</style>
